import React, {useState, useEffect} from 'react';
import {Modal, Button, Descriptions} from 'antd';
import EditTable from './EditTable';
import './DeliverGoods.scss';

function DeliverGoods(props) {

  const [express, setExpress] = useState('');
  const [data, setData] = useState([]);
  let tempNum = 0;
  JSON.stringify(props.supplierOrderDetials) !== '{}' && props.supplierOrderDetials.goods.forEach((item, i) => {
    tempNum += item.number;
  });
  const collectingData = (express, data) => {
    setExpress(express);
    setData(data);
  };

  return (
    <div className={'deliverGoods'}>
      <Modal
        confirmLoading={props.loading}
        width={1200}
        title='发 货'
        visible={props.visible}
        onOk={() => props.handleOk(data, props.supplierOrderDetials.order_no)}
        onCancel={props.handleCancel}
      >
        <div className={'deliverGoods__box'}>
          <h6>订单号：{JSON.stringify(props.supplierOrderDetials) !== '{}' && props.supplierOrderDetials.order_no}</h6>
          <div className={'address'}>
            <Descriptions title="收件人信息">
              <Descriptions.Item label="姓名">{props.address.consignee}</Descriptions.Item>
              <Descriptions.Item label="地址">
                {props.address.province_name}
                {props.address.city_name}
                {props.address.district_name}
                {props.address.address}
              </Descriptions.Item>
              <Descriptions.Item label="电话">{props.address.phone}</Descriptions.Item>
            </Descriptions>
          </div>
          <ul className={'goodsInfo'}>
            <li className={'goodsInfo__item'}>
              <i>序号</i>
              <span>商品名称</span>
              <i>商品数量</i>
              <span>状态</span>
            </li>

            {
              JSON.stringify(props.supplierOrderDetials) !== '{}' && props.supplierOrderDetials.goods.map((item, index) => (
                <li className={'goodsInfo__item'}>
                  <i>{index + 1}</i>
                  <span>{item.goods_title}</span>
                  <i>{item.number}</i>
                  <span>{item.goods_spec}</span>
                </li>
              ))
            }
          </ul>
          <EditTable
            collectingData={collectingData}
            logisticsTemplate={props.logisticsTemplate}
            tempNum={tempNum}
            data={props.supplierOrderDetials.goods}
          />
        </div>
      </Modal>
    </div>
  );
}

export default DeliverGoods;
